<template>
	<view class="u-p-t-10">
		<u-empty v-if="!model.items.length" text="无数据" mode="page"></u-empty>
		<view class="comment" v-for="(res, index) in model.items" :key="res.id">
			<view class="left">{{ index + 1 }}:</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.subject }}</view>
					<view class="like"><view class="num"></view></view>
				</view>
				<view class="reply-box">
					<view class="item">
						<u-input v-if="res.mode == 1" v-model="res.itemAnswer" />
						<u-radio-group v-if="res.mode == 2" v-model="res.itemAnswer">
							<u-radio v-for="(item, index1) in res.answers" :key="index1" :name="item">{{ item }}</u-radio>
						</u-radio-group>
						<u-checkbox-group v-if="res.mode == 3" v-model="res.itemAnswer">
							<u-checkbox v-for="(item, index2) in res.answers" :key="index2" :name="item">{{ item }}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<view class="btn-line">
			<button class="landing" type="primary" style="width: 90%;" @click="bindConfirm">提交</button>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			model: {
				items: []
			}
		};
	},
	onLoad(option) {
		this.id = option.id;
	},
	onShow() {
		this.request({
			url: 'EamPlan/exec',
			data: {
				id: this.id
			},
			success: res => {
				this.model = res.data;
				uni.setNavigationBarTitle({
					title: this.model.name
				});
			}
		});
	},
	methods: {
		bindConfirm() {
			for (var i = 0, len = this.model.items.length; i < len; i++) {
				var obj = this.model.items[i];
				if (obj.itemAnswer == null || obj.itemAnswer == '') {
					this.$u.toast('请确认第' + (i + 1) + '行项！');
					return;
				}
			}
			this.request({
				url: 'EamPlan/submit',
				method: 'POST',
				data: this.model,
				success: res => {
					if (res.code == 200) {
						uni.navigateBack();
					} else {
						this.$u.toast(res.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 10rpx 10rpx 10rpx 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
